@import '../helpers/mixin';

.nav {
  @include clearfix();
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  display: block;
  width: 100%;

  &__item {
    transition: all .2s ease-in-out;
    display: inline-block;
    height: 100px;
    width: 60px;
    background-color: rgba(255,255,255,.1);
    cursor: pointer;
    position: relative;
    &:first-child { float: left; }
    &:last-child { float: right; }

    &:hover {
      background-color: rgba(255,255,255,.2);
      .nav__arrow { width: 18px; }
    }
  }

  &__arrow {
    width: 15px;
    height: 24px;
    top: 50%;
    position: absolute;
    margin-top: -9px;
    fill: #fff;
    transition: width .2s ease-in-out;

    &--left { margin-left: 16px; }
    &--right { margin-left: 24px; }
  }
}